<template>
  <MainContent
    back
    back-func
    class="main-content"
    @back="back"
  >
    <template #title>
      <template v-if="id == '0'">
        创建页面
      </template>
      <template v-else>
        <div
          v-if="!isTitleEditable"
          class="edit-title"
          @click="isTitleEditable = true"
        >
          {{ form.name }}
          <el-icon><Edit /></el-icon>
        </div>
        <div
          v-else
          class="edit-title"
        >
          <el-input
            v-model="titleEditModel"
            placeholder="请输入页面名称"
            show-word-limit
            max="30"
            @blur="checkTitleEdit"
          />
        </div>
      </template>
    </template>
    <template #extra>
      <el-button
        type="primary"
        plain
        :loading="submitLoading"
        @click="publish('save')"
      >
        保存
      </el-button>
      <el-button
        type="primary"
        plain
        :loading="submitLoading"
        @click="publish('preview')"
      >
        保存并预览
      </el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="publish('close')"
      >
        保存并关闭
      </el-button>
    </template>

    <div
      ref="containerRef"
      class="container"
    >
      <div class="decorate-content-left">
        <div class="title">
          <h5>
            商品类({{ goodsCategory.length }})
          </h5>
        </div>
        <ul class="decorate-component">
          <li
            v-for="item in goodsCategory"
            :key="item.type"
            @click.stop="chooseType(item)"
          >
            <div
              class="icon-wrapper"
              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
            >
              <p>{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
              <div class="version">
                {{ item.version }}
              </div>
            </div>
          </li>
        </ul>
         <!-- 营销类 -->
         <div class="title">
          <h5>
            营销类({{ autoCategory.length }})
          </h5>
        </div>
        <ul class="decorate-component">
          <li
            v-for="item in autoCategory"
            :key="item.type"
            @click.stop="chooseType(item)"
          >
            <div
              class="icon-wrapper"
              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
            >
              <p>{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
              <div class="version">
                {{ item.version }}
              </div>
            </div>
          </li>
        </ul>
        <div class="title">
          <h5>
            图文类({{ pictureCategory.length }})
          </h5>
        </div>
        <ul class="decorate-component">
          <li
            v-for="item in pictureCategory"
            :key="item.type"
            @click.stop="chooseType(item)"
          >
            <div
              class="icon-wrapper"
              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
            >
              <p>{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
              <div class="version">
                {{ item.version }}
              </div>
            </div>
          </li>
        </ul>
        <div class="title">
          <h5>
            会员类({{ memberCategory.length }})
          </h5>
        </div>
        <ul class="decorate-component">
          <li
            v-for="item in memberCategory"
            :key="item.type"
            @click.stop="chooseType(item)"
          >
            <div
              class="icon-wrapper"
              :style="{ backgroundImage: 'url(' + item.icon + ')' }"
            >
              <p>{{ item.name }}</p>
              <span v-if="item.isSenior">高级</span>
              <span v-else-if="item.isBottom">置底</span>
              <div class="version">
                {{ item.version }}
              </div>
            </div>
          </li>
        </ul>
       
      </div>
      <div class="decorate-content-center">
        <div
          class="phone hiddenScroll"
          @click.stop
        >
          <div
            ref="phoneContent"
            v-loading="iframeLoading"
            class="phoneContent"
          >
            <!-- v-show="!iframeLoading"
            v-if="mallInfo" -->
            <iframe
              ref="iframe"
              class="iframe"
              :src="iframeHref"
            />
          </div>
        </div>
      </div>

      <div
        class="decorate-content-right"
        @click.stop
      >
        <div>
          <component
            :is="selectComponentInfo?.component"
            v-model:page-config="configContent"
            @change-style="changeStyle"
          />
        </div>
      </div>
    </div>
  </MainContent>

  <el-dialog
    v-model="dialogFormVisible"
    class="dialog-form"
    :title="title"
    width="40%"
    :before-close="closeForm"
  >
    <el-form
      ref="manageForm"
      :model="form"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item
        label="商城页面名称"
        prop="name"
      >
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="商城页面名称"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        label="设为首页"
        prop="homePage"
      >
        <el-switch
          v-model="homePageModel"
          inline-prompt
          :active-value="1"
          :inactive-value="0"
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
    </el-form>
    <!-- <el-button type="primary" :loading="loading" @click="getPosterImg">生成封面图</el-button>&nbsp;&nbsp;<span
      style="color: red">请先生成封面图，否则可能无法更新封面图</span> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm(manageForm)"
        >保存</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible"
    title="确认离开此页面？"
    width="30%"
  >
    <span>系统可能不会保存您所做的更改</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="back2"
        >确认</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- <el-dialog class="dialog-form1" v-model="promoteVisible" title="微信扫码预览" width="30%" :close-on-click-modal="false">
    <qrcode-vue style="margin: 10px auto; display: block" :value="pageLink" :size="100" level="H" />
    <p style="margin: 10px auto; display: block; text-align: center">
      微信扫码预览
    </p>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="promoteVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog> -->
  <Dialog
    :model-value="promoteVisible"
    title="扫码预览"
    :width="500"
    @close="promoteVisible = false"
  >
    <div class="qrcode-container">
      <qrcode-vue
        :value="pageLink"
        :size="200"
        level="H"
      />
      <div class="tips">
        <div>手机扫左边二维码预览</div>
        <div>
          你也可以打开
          <a
            :href="pageLink"
            target="_blank"
          >新窗口预览</a>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-button
          v-clipboard="`${link}`"
          v-clipboard:success="clipboardSuccess"
          >复制链接</el-button
        > -->
        <el-button @click="copyItemUrl">复制链接</el-button>
        <el-button
          type="primary"
          @click="promoteVisible = false"
        >关闭</el-button>
      </span>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
// 商城 => 商城装修 => 页面装修 => 新增页面 | 装修
import type { FormInstance } from "element-plus";
import type { ApiResult } from "@/api/base/ApiResult";
import type { Ref, WritableComputedRef } from "vue";
import QrcodeVue from "qrcode.vue";
import { Edit } from "@element-plus/icons-vue";
import { ElMessage, ElNotification } from "element-plus";
import { upload as uploadPicture } from "@/utils/minio-upload";
import { templateItem } from "@/api/modules/actapp";
import { getPreviewUrl, getMallInfoById } from "@/api/pointsMall";
import { storePageEdit, getStorePage } from "@/api/actapp";
import {
  getAllOperationComponents,
  getLatestStoreTypeList,
  IImportedOperationComponentInfo
} from "@/views/activity/actApp/componentsVersionControl";

const operationComponents = getAllOperationComponents();

const versionInfoList = computed(() => operationComponents.map((item) => ({
  version: item.version,
  componentName: item.componentName,
})))

const { latestStoreTypeList, allStoreTypeList } = getLatestStoreTypeList();

// 左侧面板仅展示最新
const goodsCategory = computed(() => latestStoreTypeList.filter((i) => i.category == "goods"))
const pictureCategory = computed(() => latestStoreTypeList.filter((i) => i.category == "picture"))
const memberCategory = computed(() => latestStoreTypeList.filter((i) => i.category == "member"))
const autoCategory = computed(() => latestStoreTypeList.filter((i) => i.category == "auto"))

const router = useRouter();
const route = useRoute();
const store = useStore();
const mallInfo = computed(() => store.state.storeEdit.mallInfo);

const promoteVisible = ref(false);
const pageLink = ref('');
const containerRef = ref();
const currentUid = ref("");
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const title = ref("新增页面名称");
const configContent = ref();
const templateTableData: Ref<templateItem[]> = ref([]);

const uuid = () => {
  return Math.random().toString(36).substr(3, 10);
};
const loading = ref(false);
const final_status = ref('');
const id = ref("0");
const publish = (status: string) => {
  final_status.value = status
  if (id.value == "0") {
    title.value = '新增页面名称'
    dialogFormVisible.value = true;
  } else {
    title.value = '编辑页面名称';
    submitForm(undefined);
  }
};

//编辑时取消时需要还原的名称
let preFormName = ''

// 删除
const sliceItem = (idx: string) => {
  const targetIndex = templateTableData.value.findIndex(item => item.uid === idx);
  templateTableData.value.splice(targetIndex, 1);
  if (templateTableData.value.length > 0) {
    getCurrentUid(templateTableData.value[templateTableData.value.length - 1].uid);
  } else {
    selectComponentInfo.value = undefined;
    configContent.value = {};
  }
};

const getCurrentUid = (uid: string) => {
  console.log("getCurrentUid uid =>", uid)
  // 用户创建相同类型的组件时，会导致右侧Operation组件不更新，例如富文本组件;
  // 触发v-if销毁组件，在nextTick中重新mount;
  selectComponentInfo.value = undefined;
  configContent.value = {};
  currentUid.value = uid;

  if (!currentUid.value) {
    return
  }

  // 根据新数据重新渲染
  nextTick(() => {
    const template = templateTableData.value.find(item => item.uid == currentUid.value)
    if (template) {
      console.log("templateTableData.value item", template);
      configContent.value = template.pageConfig;
      getOperationByStoreType(template)
    }
  })
};
const copyItemUrl = () => {
  let oInput = document.createElement("input");
  // 将想要复制的值
  oInput.value = pageLink.value;
  // 页面底部追加输入框
  document.body.appendChild(oInput);
  // 选中输入框
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand("Copy");
  // 复制后移除输入框
  ElMessage({
    showClose: true,
    message: "复制成功",
    type: "success",
  });
  oInput.remove();
};

// 从左侧面板选择组件后创建
const chooseType = (typeConfig: { type: string; version: string; }) => {
  console.log("merchant log => chooseType typeConfig", typeConfig);
  const { type, version } = typeConfig;
  let flag = 1;
  templateTableData.value.forEach((c) => {
    if (c.type == type && type == "Floatbtn") {
      flag = 2;
    }
    if (c.type == type && (type == "Allgoods" || type == "Footbar")) {
      flag = 3;
    }
  });
  if (flag === 2) {
    ElMessage.warning("只能存在一组浮动按钮");
    return
  }

  if (flag === 3) {
    ElMessage.warning("置底组件只能添加一个");
    return
  }

  const currentTemplateIndex = templateTableData.value.findIndex(item => item.uid === currentUid.value);
  const nextInsertIndex = currentTemplateIndex > -1 ? currentTemplateIndex + 1 : templateTableData.value.length; // 插入位置

  currentUid.value = uuid();

  // 查找对应版本的配置项
  const pageConfig = allStoreTypeList.find((j) => j.type == type && j.version === version).pageConfig ?? {}; // 默认初始配置

  configContent.value = JSON.parse(JSON.stringify(pageConfig));

  // 插入至当前所选组件后
  templateTableData.value.splice(nextInsertIndex, 0, {
    uid: currentUid.value,
    type: type,
    version: typeConfig.version,
    pageConfig: JSON.parse(JSON.stringify(configContent.value)),
  })

  getOperationByStoreType(typeConfig)
};

const selectComponentInfo: Ref<IImportedOperationComponentInfo | undefined> = ref();

const getOperationByStoreType = (typeConfig: {type: string; version: string}) => {
  const _version = typeConfig.version ?? 'default';

  selectComponentInfo.value = operationComponents.find(componentInfo =>
    componentInfo.version === _version &&
    componentInfo.componentName.toLowerCase() === (typeConfig.type + 'Operation').toLowerCase()
  );

  if (!selectComponentInfo.value) {
    console.error("未找到对应版本的operation组件，配置文件 =>", typeConfig)
  }
}

const changeStyle = (style: Pick<templateItem, 'pageConfig'>) => {
  for (let i = 0; i < templateTableData.value.length; i++) {
    if (templateTableData.value[i].uid == currentUid.value) {
      templateTableData.value[i].pageConfig = style;
    }
  }
};
const iframeLoading = ref(true);
// const iframeReady = ref(false);
const iframe:Ref<HTMLIFrameElement | undefined> = ref();
const iframeUrl = window.VUE_APP_URL[import.meta.env.MODE].appPreviewPath + store.state.user.merchant.merchantCode;
const iframeRoute = computed(() => `/mall/${mallInfo.value.mallCode}/design`)
const iframeHref = ref('')

const initIFrame = () => {
  iframeLoading.value = true;
  iframeHref.value = `${iframeUrl}#${iframeRoute.value}`
}

const handleMessage = (event: MessageEvent) => {
  let data = event.data;
  console.log("merchant log => receive message: ", data);
  switch (data.method) {
    case "webpackOk":
      // iframeReady.value = true;
      iframeLoading.value = false;
      toUpdateIframeMessage();
      break;
    case "sliceIdx":
      sliceItem(data.params);
      break;
    case "getCurrentUid":
      getCurrentUid(data.params);
      break;
    case "changeSort":
      templateTableData.value=JSON.parse(data.params)
      // Object.assign(templateTableData.value, JSON.parse(data.params));
      break;
    case "addCopy":
      Object.assign(templateTableData.value, JSON.parse(data.params));
      break;
    case "getPosterImg":
      getPosterImg(data.params)
      break;
    default:
      break;
  }
};
const toUpdateIframeMessage = async () => {
  console.log("发送消息");
  if (iframe.value && iframe.value.contentWindow) {
    iframe.value.contentWindow.postMessage(
      {
        method: "updateIframeMessage",
        params: {
          templateConfig: JSON.stringify(templateTableData.value),
          pageSettings: JSON.stringify(pageSettings.value),
          currentUid: currentUid.value,
        },
      },
      "*"
    );
  } else {
    console.warn("iframe 不存在：发送消息")
  }
};

// 页面全局配置
const initPageSetting = () => {
  const pageSetting = templateTableData.value.find(item => item.type === "PageSetting");
  if (!pageSetting) {
    // 页面
    const pageSettingStoreType = latestStoreTypeList.find(item => item.type === 'PageSetting'); // 获取默认配置
    chooseType(pageSettingStoreType)
  } else {
    getCurrentUid(pageSetting.uid)
  }
}

const pageSettings = computed(() => store.state.storeEdit.pageSettings);
const initPageData = async () => {
  const rs = await getMallInfoById(route.params.mallId);
  if (rs.code == 200) {
    // mallInfo.value = rs.payload;
    store.commit("storeEdit/setMallInfo", rs.payload)
  } else {
    ElMessage.error("查询商城信息失败")
    return;
  }
  sessionStorage.setItem('type', 'store')
  id.value = <string>route.params.id;
  if (id.value !== "0") {
    const rs = await getStorePage({ id: id.value });
    store.commit("storeEdit/setPageInfo", rs.payload);
    Object.assign(templateTableData.value, JSON.parse(rs.payload.pageConfig));
    store.commit("storeEdit/setPageSettings", JSON.parse(rs.payload.pageSettings || "{}"))
    // posterUrl = rs.payload.img;
    form.value.name = rs.payload.name;
    preFormName = rs.payload.name
    homePageModel.value = rs.payload.homePage
  }

  initPageSetting();
}

const cancelSelect = () => {
  // getCurrentUid("")
  const pageSettingTemplate = templateTableData.value.find(item => item.type === "PageSetting")
  getCurrentUid(pageSettingTemplate?.uid ?? "")
}

const handleEventAdd = () => {
  document.onkeydown = function (e) {
    if (e.key == "Enter") {
      return false;
    }
  };
  window.addEventListener("message", handleMessage, false);
  // 点击事件如果加在window上会导致teleport到body上的组件点击事件冲突
  containerRef.value.addEventListener("click", cancelSelect)
}

const handleEventRemove = () => {
  containerRef.value.removeEventListener("click", cancelSelect)
  window.removeEventListener("message", handleMessage)
}

let form = ref({
  id: "",
  name: "",
  homePage: 0,
});

const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入页面名称",
      trigger: "blur",
    },
  ],
});

const closeForm = () => {
  if (id.value == '0') {
    resetForm()
  } else {
    form.value.name = preFormName
    dialogFormVisible.value = false;
  }
}
const manageForm = ref<FormInstance>();
const resetForm = () => {
  form.value = {
    id: "",
    name: "",
    homePage: 0,
  };
  manageForm.value?.resetFields();
  dialogFormVisible.value = false;
};
// let posterUrl = "";
// const decoratePhoneBottom = ref();

let requestPosterImgResolve: (rs: ApiResult<null>) => void
const requestPosterImg = async () => {
  const rs = await new Promise<ApiResult<null>>(resolve => {
    if (iframe.value && iframe.value.contentWindow) {
      iframe.value.contentWindow.postMessage({
        method: "getPosterImg"
      }, "*")
      requestPosterImgResolve = resolve // 等待getPosterImg resolve
    } else {
      console.warn("iframe 不存在：请求截图")
    }
  })

  return rs
}

const getPosterImg = async (messageParams: { base64Url: string }) => {
  const { base64Url } = messageParams
  const picture = base64ImgtoFile(base64Url);
  const result: ApiResult<null> = await uploadPicture(picture, "act") as ApiResult<null>;

  // 使requestPosterImg 的promise 继续走下去
  requestPosterImgResolve && requestPosterImgResolve(result)
  return result
};
// dataurl 为传进来的base64格式的图片地址， return 返回的为file格式
const base64ImgtoFile = (dataurl: string, filename = "file") => {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)?.[1];
  if (!mime) {
    throw new Error("dataurl格式不正确")
  }
  let suffix = mime.split("/")[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([ u8arr ], `${filename}.${suffix}`, {
    type: mime,
  });
};

const homePageModel:WritableComputedRef<1 | 0> = computed({
  get() {
    const pageSettingTypeConfig = templateTableData.value.find(item => item.type.toLowerCase() === 'pagesetting')
    return pageSettingTypeConfig ? pageSettingTypeConfig.pageConfig.homePage : 0
  },
  set: (value) => {
    initPageSetting()
    configContent.value = value;
    const pageSettingTypeConfig = templateTableData.value.find(item => item.type.toLowerCase() === 'pagesetting')!
    pageSettingTypeConfig.pageConfig.homePage = value
  },
})


const submitLoading:Ref<boolean> = ref(false);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (submitLoading.value) {
    console.log("loading...")
    ElNotification.warning("手速过快，请勿重复提交")
    return
  }

  if (formEl) {
    const valid = await new Promise(resolve => {
      formEl.validate(async (valid) => {
        resolve(valid)
      });
    })

    if (!valid) {
      console.log("校验失败");
      return
    }
  }

  submitLoading.value = true
  const { url: coverImgUrl } = await requestPosterImg() // 封面图

  const params = {
    name: form.value.name,
    id: id.value == '0' ? '' : id.value,
    type: 1,
    relationId: store.state.pointsMall.mallConfig.id,
    pageConfig: JSON.stringify(templateTableData.value),
    pageSettings: JSON.stringify(pageSettings.value),
    img: coverImgUrl,
    homePage: homePageModel.value,
  };
  const rs = await storePageEdit(params);
  if (rs.code == 200) {
    ElMessage.success("保存成功");
    resetForm();
    if (final_status.value == 'preview') {
      router.push('/mall/decorate/page/store_app/' + store.state.pointsMall.mallConfig.id + "/" + rs.payload.id)
      const rs2 = await getStorePage({ id: rs.payload.id });
      Object.assign(templateTableData.value, JSON.parse(rs2.payload.pageConfig));
      console.log('[ rs2 ]', rs2)
      // posterUrl = rs2.payload.img;
      let previewData: any = await getPreviewUrl({ id: rs2.payload.id })
      if (previewData.code === 200) {
        pageLink.value = previewData.payload.previewUrl;
        promoteVisible.value = true;
      }
      id.value = <string>route.params.id;
      form.value.name = rs2.payload.name;
      preFormName = rs.payload.name

    } else if (final_status.value == 'save') {
      router.push('/mall/decorate/page/store_app/' + store.state.pointsMall.mallConfig.id + "/" + rs.payload.id)
      const rs2 = await getStorePage({ id: rs.payload.id });
      Object.assign(templateTableData.value, JSON.parse(rs2.payload.pageConfig));
      // posterUrl = rs2.payload.img;
      id.value = <string>route.params.id;
      form.value.name = rs2.payload.name;
      preFormName = rs.payload.name
    } else {
      router.push('/mall/decorate/page')
    }
  } else {
    console.log("报错啦！请重新试一下");
  }
  final_status.value = ''
  submitLoading.value = false
};

const back = () => {
  if (final_status.value) {
    back2();
  } else {
    dialogVisible.value = true;
  }
};

const back2 = () => {
  router.push('/mall/decorate/page')
};

// 直接编辑标题
const isTitleEditable = ref(false); // 标题是否可直接点击编辑
const titleEditModel = ref("")
watch(() => form.value.name, () => {
  titleEditModel.value = form.value.name;
}, {
  immediate: true
})
const checkTitleEdit = () => {
  if (!titleEditModel.value) {
    ElMessage.info("未输入标题，已还原")
    titleEditModel.value = form.value.name
    return
  }

  isTitleEditable.value = false;
  final_status.value = "save";
  form.value.name = titleEditModel.value
  submitForm(undefined);
}

watch(templateTableData, () => {
  toUpdateIframeMessage();
}, {
  deep: true
});

// watch([ iframeReady ], ([ ready1 ]: Array<boolean>) => {
//   if (ready1) {
//     iframeLoading.value = false;
//     toUpdateIframeMessage();
//   }
// });

onMounted(async () => {
  // console.log("store", store)
  await initPageData();
  handleEventAdd();
  initIFrame();
});

onBeforeUnmount(() => {
  handleEventRemove()
})


provide("versionInfoList", versionInfoList);
provide("currentPageConfig", configContent);
provide("currentComponentInfo", selectComponentInfo);
</script>
<style scoped lang="scss">
.main-content {
  position: relative;

  :deep(.all-content) {
    margin: 0;
    height: calc(100vh - 88px);
  }

  :deep(.content-slot) {
    height: 100%;
  }

  :deep(.white) {
    padding: 0 !important;
  }
}

.container {
  width: 100%;
  display: flex;
  height: calc(100vh - 88px);
  overflow: hidden;

  .decorate-content-left {
    width: 300px;
    padding: 16px;
    overflow: auto;
    border-radius: 4px;
    background: #fff;

    .title {
      width: calc(100% - 24px);
      height: 40px;
      line-height: 40px;
      padding-left: 12px;
      padding-right: 12px;
      font-weight: 700;
      color: #666;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f7f7fa;

      h5 {
        font-size: 16px;
      }
    }

    .decorate-component {
      width: calc(100% - 48px);
      margin: 10px auto;
      display: flex;
      flex-wrap: wrap;

      li {
        list-style: none;
        width: calc(33.3% - 4px);
        border: 2px solid #fff;
        border-radius: 5px;

        &:hover {
          border-color: #fb6638;
        }

        &.active {
          border-color: #fb6638;
        }

        .icon-wrapper {
          width: 76px;
          height: 76px;
          margin: 0 auto;
          background-size: 100% 100%;
          position: relative;

          p {
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 28px;
            color: #333;
            width: 100%;
            text-align: center;
            font-size: 16px;
          }

          span {
            background: red;
            color: #fff;
            position: absolute;
            border-radius: 4px;
            right: 1px;
            font-size: 11px;
            padding: 0 2px;
            zoom: 0.9;
            top: 1px;
          }

          .version {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 12px;
            opacity: 0;
            pointer-events: none;
          }
        }
      }
    }
  }

  .decorate-content-center {
    height: 100%;
    flex: 1;
    background: #f2f4f7;
    //padding-bottom: 50px;
    overflow: auto;
    position: relative;

    .decorate-phone {
      width: 377px;
      height: auto;
      border: 1px solid #ddd;
      background: #fafafa;
      margin: 50px auto 0;
      position: absolute;
      z-index: -1;
      background-repeat: no-repeat;
      background-size: 100%;

      &-top {
        width: 375px;
        height: 88px;
        position: relative;

        p {
          position: absolute;
          width: 160px;
          height: 30px;
          left: calc(50% - 80px);
          top: calc(50% + 7px);
          font-style: normal;
          font-weight: 700;
          font-size: 18px;
          line-height: 30px;
          text-align: center;
          mix-blend-mode: normal;
        }
      }

      &-bottom {
        >div {
          position: relative;

          .float-btn-container {
            width: 100%;
            position: absolute;

            &-top {
              position: relative;
              top: 0;
              left: 0;
              width: 100%;
              z-index: -1;
            }

            &-bottom {
              // position: relative;
            }
          }

          &:hover {
            .sure-close {
              display: block;
            }
          }
        }

        .selected {
          border: 2px solid #fb6638;
        }

        .selectedF {
          box-sizing: border-box;
          border: 2px solid #fb6638;
        }

        .sure-close {
          display: none;
          position: absolute;
          right: 5px;
          top: 5px;
          cursor: pointer;
        }
      }

      .phone-top {
        width: 375px;
        height: 88px;
      }
    }

    .phone {
      width: 375px;
      flex-shrink: 0;
      height: 750px;
      margin: 0 auto;
      padding-top: 80px;
      background: url(@/assets/images/5CE8E8915B724C57964D4B54C5FD21A1_11af.png) no-repeat;
      background-size: 100%;
      position: relative;
      box-sizing: border-box;

      .resetAll {
        position: absolute;
        top: -40px;
        left: 0;
      }

      .phoneContent {
        display: block;
        width: 326px;
        height: 620px;
        margin: 0 auto;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .iframe {
          width: 100%;
          height: 100%;
          border: 0;
        }
      }
    }
  }

  .decorate-content-right {
    height: 100%;
    width: 420px;
    overflow: auto;
    background: #fff;
    position: relative;
  }
}

.qrcode-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .tips {
    color: #666666;
    margin-left: 20px;
    font-size: 14px;

    div {
      &+div {
        margin-top: 10px;
      }
    }

    a {
      color: var(--el-color-primary);
    }
  }
}

.edit-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 400px;

  :deep(.el-icon) {
    margin-left: 10px;
  }

  :deep(.el-input) {
    width: 400px;
  }
}
</style>
